<script setup>
import { ref,reactive,onMounted,toRefs } from 'vue';
import{useRouter} from 'vue-router';
import{listActivity} from '@/api/shop/activity';
const router = useRouter();
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    shopName: null,
    activityName: null,
    activityStatus: null,
    activityPic: null,
    activityDesc: null,
    activityDetails: null,
    activityStart: null,
    activityOver: null
  },
});
const { queryParams, form } = toRefs(data);
// 获取热门活动列表
const activityList = ref([]);
onMounted(() => {
  listActivity(queryParams.value).then((res) => {
    activityList.value = res.rows;
    console.log(activityList.value);
  });
});
</script>

<template>
  <div class="activity">
    <div class="top">
      <span class="left-text">热门活动</span>
      <span class="right-text">更多活动》》</span>
      </div>
   <div class="grid-container">
      <router-link :to="{path:'/activityDetail',query:{name:item.activityName}}" class="grid-item" v-for="(item, index) in activityList" :key="index">
        <div class="image-container">
          <img :src="item.activityPic" alt="">
          <div class="overlay">
            <h4>{{ item.activityName }}</h4>
          </div>
        </div>
      </router-link>
    </div>
    </div>
</template>
<style scoped>
.activity {
  padding: 20px;
  
}

.top {
  width: 100%;
  max-width: 1400px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  font-size: 21px;
  color: #7ebdf4;
  margin-bottom: 20px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  width: 90%;
  margin-left: 5%;
  max-width: 1400px;
  
}

.grid-item {
  position: relative;
  height: 300px;
  overflow: hidden;
  margin-left: 20%;
  aspect-ratio: 1;
  text-decoration: none;
  
}

.image-container {
  position: relative;
  width: 100%;
   height: 100%;
  overflow: hidden;
}

.image-container img {
  width: 300px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.overlay {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 15px;
  transition: bottom 0.3s ease;
}

.grid-item:hover img {
  transform: scale(1.1);
}

.grid-item:hover .overlay {
  bottom: 0;
}

.overlay h4 {
  margin: 0;
  text-align: center;
}
</style>



 